<template>
  <div>
    <!-- 1.分类顶部导航区域 -->
    <!-- <nav-comp :back="false" title="商品分类"></nav-comp> -->

    <!-- 2. 间隔槽-->
    <!-- <gap-comp :height="1"></gap-comp> -->

    <!-- 3.分类数据区域  :main-active-index.sync="active"-->
    <van-tree-select
      height="100vh"
      :items="cateData"
      :main-active-index.sync="active"
    >
0      <!--二级分类区域 具名作用域插槽  -->
      <template #content>
        <!-- 一级分类标题 -->
        <van-divider
          :style="{
            color: '#FF6040',
            borderColor: '#FF6040',
            padding: '0 16px',
          }"
        >
          {{ cateData[active].text }}
        </van-divider>
        <!-- 二级分类数据 -->
        <van-grid :column-num="3" :icon-size="60">
          <van-grid-item
            v-for="item in cateData[active].children"
            :key="item.id"
            :icon="
              $pre +
             item.img
            "
            :text="item.catename"
            @click="goList(item.id)"
          />
        </van-grid>
      </template>
    </van-tree-select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0, //左侧一级分类默认选中下标
      cateData: [
        {
          id: 2,
          pid: 0,
          text: "手机通讯",
          img: "",
          status: 1,
          children: [
            {
              id: 10,
              pid: 2,
              text: "诺基亚手机",
              img: "/uploads/category/fee7e580-6c2d-11ea-b86c-579aced212c2.png",
              status: 1,
            },
            {
              id: 12,
              pid: 2,
              text: "手机配件",
              img: "/uploads/category/764b6740-9673-11ea-b348-a734901db180.jpg",
              status: 1,
            },
            {
              id: 13,
              pid: 2,
              text: "小米手机",
              img: "/uploads/category/91238110-9673-11ea-b348-a734901db180.jpg",
              status: 1,
            },
            {
              id: 14,
              pid: 2,
              text: "oppo手机",
              img: "/uploads/category/5f200c50-9674-11ea-b348-a734901db180.jpg",
              status: 1,
            },
            {
              id: 24,
              pid: 2,
              text: "苹果macbok",
              img: "/uploads/category/0ebd5d00-12af-11eb-bcdf-7718b9d6829d.jpg",
              status: 1,
            },
            {
              id: 25,
              pid: 2,
              text: "甜婶‘",
              img: "/uploads/category/cb22d1f0-ac63-11ed-a19e-0999552e1a6b.jpg",
              status: 1,
            },
          ],
        },
        {
          id: 3,
          pid: 0,
          text: "电脑办公",
          img: "",
          status: 1,
          children: [
            {
              id: 11,
              pid: 3,
              text: "笔记本",
              img: "/uploads/category/ddb0b9f0-6de0-11ea-a8e1-0d680bf54839.jpg",
              status: 1,
            },
            {
              id: 15,
              pid: 3,
              text: "mac本",
              img: "/uploads/category/86b1e680-9674-11ea-b348-a734901db180.jpg",
              status: 1,
            },
            {
              id: 16,
              pid: 3,
              text: "华为笔记本",
              img: "/uploads/category/a740dc80-9674-11ea-b348-a734901db180.jpg",
              status: 1,
            },
            {
              id: 17,
              pid: 3,
              text: "戴尔笔记本",
              img: "/uploads/category/b63aeff0-9674-11ea-b348-a734901db180.jpg",
              status: 1,
            },
          ],
        },
        {
          id: 4,
          pid: 0,
          text: "家居",
          img: "",
          status: 1,
        },
        {
          id: 5,
          pid: 0,
          text: "服装",
          img: "",
          status: 1,
        },
        {
          id: 7,
          pid: 1,
          text: "电视",
          img: "/uploads/category/fc3abc50-6c2c-11ea-b86c-579aced212c2.jpg",
          status: 1,
        },
        {
          id: 8,
          pid: 1,
          text: "空调",
          img: "/uploads/category/354b31f0-6c2d-11ea-b86c-579aced212c2.jpg",
          status: 1,
        },
        {
          id: 9,
          pid: 1,
          text: "洗衣机",
          img: "/uploads/category/436e9470-6c2d-11ea-b86c-579aced212c2.jpg",
          status: 1,
        },
        {
          id: 18,
          pid: 0,
          text: "男鞋",
          img: "",
          status: 1,
        },
        {
          id: 19,
          pid: 0,
          text: "女鞋",
          img: "",
          status: 1,
        },
        {
          id: 20,
          pid: 0,
          text: "化妆品",
          img: "",
          status: 1,
        },
        {
          id: 21,
          pid: 0,
          text: "运动户外",
          img: "",
          status: 1,
        },
        {
          id: 22,
          pid: 0,
          text: "汽车",
          img: "/uploads/category/ab594a60-1288-11eb-bcdf-7718b9d6829d.jfif",
          status: 1,
        },
        {
          id: 23,
          pid: 0,
          text: "苹果笔记本",
          img: "/uploads/category/a4272390-12ae-11eb-bcdf-7718b9d6829d.jpg",
          status: 1,
        },
      ], //商品分类数据
    };
  },
  mounted() {
    this.getcate();
  },
  methods: {
    getcate() {
      // 调用接口
      this.$api
        .reqGetCates()
        .then((res) => {
          this.cateData = res;
          this.cateData.forEach((item) => {
            item.text = item.catename;
          });
          console.log(res);
        })
        .catch((err) => console.log(err));
    },
    goList(cateid){
        this.$router.push('/goodlist?type=2&cateid='+cateid)
    }
  },
};
</script>
